import React, { Component } from 'react';

import { Form } from '@ant-design/compatible';
import { FormComponentProps } from '@ant-design/compatible/es/form';

import { Modal, Table } from 'antd';

import '@ant-design/compatible/assets/index.css';

interface CountDetailProps extends FormComponentProps {
  detailVisible: boolean;
  lookupDetailList: any;
  vipCode: number;
  handleCancel: (value: boolean) => void;
}

class CountDetailElem extends Component<CountDetailProps> {
  columns = [
    {
      title: '序号',
      dataIndex: 'id',
      width: 60,
      render: (texta: any, record: any, index: any) => (
        <div key={texta}>{index + 1}</div>
      ),
    },
    {
      title: '快递公司',
      dataIndex: 'expressName',
      width: 120,
    },
    {
      title: '运单号',
      dataIndex: 'expCode',
      width: 120,
    },
    {
      title: '揽件金额',
      dataIndex: 'realFee',
      width: 100,
      render: (text: number) => (text / 100).toFixed(2),
    },
    {
      title: '支付方式',
      dataIndex: 'chargeStatusName',
      width: 120,
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: 100,
      render: (text: number) => (text === 1 ? '有效' : '无效'),
    },
    {
      title: '揽件人',
      dataIndex: 'courierName',
      width: 120,
    },
    {
      title: '揽件时间',
      dataIndex: 'createTime',
      width: 180,
    },
  ]


  handleCancel = () => {
    const { handleCancel } = this.props;
    handleCancel(false);
  }

  render() {
    const {
      detailVisible,
      lookupDetailList,
    } = this.props;
    const dataSource = lookupDetailList;

    return (
      <Modal
        title="明细"
        centered
        width={1000}
        visible={detailVisible}
        destroyOnClose
        onCancel={this.handleCancel}
        footer={null}
      >
        <Table
          rowKey="id"
          tableLayout="fixed"
          className="statementTable"
          dataSource={dataSource}
          columns={this.columns}
          pagination={false}
          scroll={{ x: 600 }}
        />
      </Modal>
    );
  }
}

export default Form.create<CountDetailProps>()(CountDetailElem);
